<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>发布新闻</title>
    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="/static/Bootstrap/css/bootstrap.min.css"/>
    <!-- 引入jQuery -->
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <!-- 引入Bootstrap的JavaScript插件 -->
    <script src="/static/Bootstrap/js/bootstrap.min.js"></script>

    <!-- 引入summernote -->
    <link href="/static/summernote/summernote.min.css" rel="stylesheet">
    <script src="/static/summernote/summernote.min.js"></script>

    <link href="/static/css/sb-admin-2.css" rel="stylesheet"/>
    <script src="/static/js/sb-admin-2.js"></script>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/common.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <div th:replace="~{navbar :: nav }"></div>
    <!-- 新闻新增部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">新建新闻</h1>
            </div>
        </div>
        <div class="">
            <div class="row container">
                <form class="form-horizontal" id="newsForm" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="new_title" class="col-md-1 control-label">新闻标题</label>
                        <div class="col-md-9">
                            <!-- 请注意：name属性值与News中的属性名保持一致 -->
                            <input id="new_title" name="title" type="text" placeholder="新闻标题" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="new_header" class="col-md-1 control-label">新闻配图</label>
                        <div class="col-md-4">
                            <!-- 请注意：name属性值与News中的属性名保持一致 -->
                            <input id="new_header" name="file" type="file" onchange="imageUpload()"
                                   placeholder="新闻配图" class="form-control"/>
                        </div>
                        <label id="header_text" class="control-label"></label>
                    </div>
                    <div class="form-group" id="div_header" hidden>
                        <div class="col-md-9 col-md-offset-1">
                            <img id="img_header" style="width: 210px;height: 140px" src="" alt="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="summernote" class="col-md-1 control-label"
                               style="float: left;">新闻内容</label>
                        <div class="col-md-9">
                            <!-- 请注意：name属性值与News中的属性名保持一致 -->
                            <textarea id="summernote" name="content" placeholder="新闻内容" class="form-control"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <br>
            <div class="left">
                <button type="button" class="btn btn-primary" onclick="insertNews()">新增新闻</button>
                <span>&nbsp;&nbsp;</span>
                <a class="btn btn-default" href="/newsController/list" role="button">返回列表</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#summernote').summernote({
        minHeight: 200,
        callbacks: {
            onImageUpload: function (files) {
                var obj = this;
                var data = new FormData();
                data.append("file", files[0]);
                $.ajax({
                    type: "post",
                    url: "/newsController/upload",
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.status === 'OK') {
                            $('#summernote').summernote('insertImage', result.data);
                        } else {
                            alert(result.description)
                        }
                    },
                    error: function (error) {
                        alert("图片上传失败!")
                    }
                });
            }
        }
    });

    function imageUpload() {
        var data = new FormData();
        data.append("file", $('#new_header')[0].files[0]);
        $.ajax({
            type: "post",
            url: "/newsController/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.status === 'OK') {
                    $('#div_header').show()
                    $('#img_header').attr('src', result.data)
                    $('#header_text').text(result.data)
                } else {
                    $('#div_header').hide()
                    $('#img_header').attr('src', '')
                    $('#header_text').text('')
                    alert(result.description)
                }
            },
            error: function (error) {
                $('#div_header').hide()
                $('#img_header').attr('src', '')
                $('#header_text').text('')
                alert("图片上传失败!")
            }
        });
    }

    // 新增新闻
    function insertNews() {
        const image = $('#img_header').attr('src')
        if (image == null || image.length === 0) {
            alert("请选择要上传的图片！")
            return
        }

        var data = new FormData($("#newsForm")[0]);
        data.append('image', image)
        console.log(data)
        $.ajax({
            type: "post",
            url: "/newsController/insertNews",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                alert(result.description);
                if (result.status === 'OK') {
                    window.location.href = '/newsController/list'
                }
            },
            error: function (error) {
                alert("新增新闻失败!")
            }
        });
    }
</script>
</body>
</html>